<!doctype html>
<html>
<head>
  <title>The Gopher Network</title>

  <link type="text/css" rel="stylesheet" href="/static/style.css" />

  <!-- See https://github.com/firebase/firebaseui-web. -->
  <!-- *******************************************************************************************
       * TODO(DEVELOPER): Paste the initialization snippet from:
       * http://console.firebase.google.com > Overview > Add Firebase to your web app.
       ***************************************************************************************** -->
  <script>
    if (typeof firebase === 'undefined') {
      const msg = "Please paste the Firebase initialization snippet into index.html. See https://console.firebase.google.com > Overview > Add Firebase to your web app.";
      console.log(msg);
      alert(msg);
    }
  </script>
  <script src="https://cdn.firebase.com/libs/firebaseui/2.6.2/firebaseui.js"></script>
  <link type="text/css" rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/2.6.2/firebaseui.css" />
  <script src="/static/index.js"></script>
</head>
<body>

<h1>The Gopher Network</h1>

<img id="logo" src="/static/gcp-gopher.svg" width="100">

<div id="firebaseui-auth-container"></div>
<div id="sign-in"></div>
<div>
  <span id="account-details"></span>
  <button id="sign-out" hidden=true>Sign Out</button>
</div>

{{with .Notice}}<div id="notice">{{.}}</div>{{end}}

<!-- [START form] -->
<form id="post-form" enctype="multipart/form-data" action="/" method="post" hidden=true>
  <div>Message: <input name="message" value="{{.Message}}"></div>
  <input name="image" id="image" type="file" accept="image/*">
  <input type="hidden" name="token" id="token">
  <input type="submit">
</form>
<!-- [END form] -->

{{with .Posts}}
<ol>
  {{range .}}
  <li>
    <cite>{{.Author}}</cite><p>{{.Message}}</p>
    <!-- [START image] -->
    {{ if .ImageURL }}
    <img src="{{.ImageURL}}">
    {{ if .Labels }}
    <p>Labels:
      {{ range $i, $l := .Labels }}
      {{- if $i }}, {{end}}
      {{ printf "%s (%.3f)" $l.Description $l.Score -}}
      {{end}}
    </p>
    {{end}}
    {{end}}
    <!-- [END image] -->
  </li>
  {{end}}
</ol>
{{end}}

</body>
</html>
